<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .button-container {
            text-align: center;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            border: none;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            margin: 0 10px;
        }

        button:hover {
            background-color: #45a049;
        }

        .authority-message {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f0f0f0;
            text-align: center;
        }


        .role-message {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f0f0f0;
            text-align: center;
        }

        /* 退出按钮容器的样式（可选） */
        .logout-container {
            text-align: right; /* 使内容右对齐 */
            /* 可以添加更多样式，如margin、padding等 */
        }

        /* 退出按钮的样式 */
        .logout-button {
            background-color: red; /* 背景色为红色 */
            border: none; /* 去除边框 */
            color: white; /* 文字颜色为白色 */
            padding: 10px 20px; /* 内边距 */
            cursor: pointer; /* 鼠标悬停时显示小手图标 */
            /* 可以添加更多样式，如字体大小、边框半径等 */
        }

        /* 如果你希望按钮具有焦点时（如点击后）样式不变，可以添加以下样式 */
        .logout-button:focus {
            outline: none; /* 去除默认焦点框 */
        }
    </style>
</head>
<body>
<h1>Spring Security权限管理系统</h1>
<div class="logout-container">
    <!-- 退出按钮 -->
    <form action="/logout" method="post" id="logoutForm">
        <button type="submit" class="logout-button">退出</button>
    </form>
</div>


<div class="button-container">
    <h2>验证hasAuthority</h2>
    <button onclick="getAuthorityInfo('/user')">查询用户信息</button>
    <button onclick="getAuthorityInfo('/company')">查询公司信息</button>
    <div class="authority-message" id="authorityId"></div>
</div>


<div class="button-container">
    <h2>验证hasRole</h2>
    <button onclick="getRoleInfo('/car')">查询汽车信息</button>
    <button onclick="getRoleInfo('/mobile')">查询手机信息</button>
    <div class="role-message" id="roleId"></div>
</div>

<!-- Add a container for alert messages -->


<script>
        function getRoleInfo(param) {
            fetch(param)
                .then(response => {
                    return response.text();
                })
                .then(data => {
                        const displayBox = document.getElementById('roleId');
                        displayBox.textContent = data;
                })
                .catch(error => {
                    alert('获取信息失败'+error);
                });
        }


        function getAuthorityInfo(param) {
            fetch(param)
                .then(response => {
                    return response.text();
                })
                .then(data => {
                        const displayBox = document.getElementById('authorityId');
                        displayBox.textContent = data;
                })
                .catch(error => {
                    alert('获取信息失败'+error);
                });
        }

</script>
</body>
</html>